<template>
  <h1>{{ str }}</h1>
  <button @click="btn">点击翻转字符</button>
  <hr>
  <p :id="id"> 针对id的转换</p>
  <button @click="id='d2'">点击更改id的样式</button>

  <h1>v-bing语法是： v-bind:属性='属性值'</h1>
  <img v-bind:src="imgurl" alt="" width="200" height="200">
  <a v-bind:href="aurl">点击去百度</a>
  <!--简写形式 去掉v-bind 俗称 语法糖-->
  <img :src="imgurl" alt="" width="200" height="200">
  <p>obj的对象是：{{ obj }}</p>
  <div>
    <span>姓名：{{ obj.name }}</span><br>
    <span>性别：{{ obj.age }}</span>
  </div>


  <!--文本插值表达式-->
  <h1>文本插值语法是双花括号</h1>
  <h4>我的内部消息是：{{ message }}</h4>
  <!-- 如何解决后台传的数据 包含html标签-->
  <p>我是直接输出文本内容的：{{ msg }}</p>
  <!-- v-html 标签是解决 文本内包含 html标签的-->
  <p>我是后台传递过来的是不包含html标签：<span v-html="msg"></span></p>
  <p>计算a+b的值： {{ sum }}</p>
  <p>计算a+b的值： {{ a+b }}</p>
  <p>三元运算：{{ a>b? 20: 30 }}</p>

</template>

  <script setup>
  import { ref } from 'vue'

  let message = "Hello Vue 3"
  let msg = "<span style='color: red;'>我是后台传递过来的数据</span>"
  
  /**
   * 文本插值表达式 是可以做云算的
   */
  let a = 30
  let b = 20
  let sum = a + b
  let imgurl ='https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/253526/17/13523/60321/67887771F66a55249/3cb399963cb35ffa.jpg'
  let aurl = 'http://www.baidu.com'
  let objimg = './assets/sj.jpg'
  let imgsrc = objimg
  let obj = {
    name: '萧炎',
    age: 20
  }
  let id = ref('d1')

  let str = ref('Hello Vue 3')
  //函数 箭头函数 （）=>
  const btn = () => { 
    console.log(str.value.split('').reverse().join(''));
    str.value=str.value.split('').reverse().join('')
       
  }
</script>
  <style scoped>
  h4{
    color: red;
  }
  #d1{
    color: blue;
  }
  #d2{
    background-color: black;
    color: white;
    font-size: 30px;
  }
</style>
